<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="header">
            <view class="back" @click="goBack">←</view>
            <view class="title">{{playlist.title}}</view>
        </view>

        <!-- 歌单信息 -->
        <view class="playlist-info">
            <image :src="playlist.image" class="playlist-cover"></image>
            <view class="playlist-meta">
                <text class="playlist-title">{{playlist.title}}</text>
                <text class="playlist-desc">{{playlist.info}}</text>
            </view>
        </view>

        <!-- 添加歌曲按钮 -->
        <view v-if="playlist.isCustom" class="add-song-section">
            <view class="add-song-btn" @click="showAddSongDialog">
                <text class="add-song-icon">+</text>
                <text class="add-song-text">添加歌曲</text>
            </view>
        </view>

        <!-- 歌曲列表 -->
        <view class="song-list">
            <view class="song-item" 
                  v-for="(song, index) in playlist.songs" 
                  :key="index"
                  @click="playSong(song)">
                <text class="song-index">{{index + 1}}</text>
                <view class="song-info">
                    <text class="song-title">{{song.title}}</text>
                    <text class="song-artist">{{song.artist}}</text>
                </view>
                <text class="song-more" @click.stop="showSongMenu(song, index)">···</text>
            </view>
        </view>
        
        <!-- 添加歌曲弹窗 -->
        <view v-if="showAddDialog" class="dialog-mask" @click="closeAddDialog">
            <view class="dialog-content" @click.stop>
                <view class="dialog-header">
                    <text class="dialog-title">添加歌曲</text>
                    <text class="dialog-close" @click="closeAddDialog">×</text>
                </view>
                <view class="dialog-body">
                    <view class="song-select-list">
                        <view class="song-select-item" 
                              v-for="song in availableSongs" 
                              :key="song.id"
                              @click="toggleSongSelection(song)">
                            <view class="song-select-info">
                                <text class="song-select-title">{{ song.title }}</text>
                                <text class="song-select-artist">{{ song.artist }}</text>
                            </view>
                            <view class="song-select-check" :class="{ 'checked': isSongSelected(song) }">
                                <text v-if="isSongSelected(song)">✓</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="dialog-footer">
                    <view class="dialog-btn dialog-btn-cancel" @click="closeAddDialog">
                        <text>取消</text>
                    </view>
                    <view class="dialog-btn dialog-btn-confirm" @click="confirmAddSongs">
                        <text>确定</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            playlist: {
                id: null,
                title: '',
                info: '',
                image: '',
                songs: [],
                isCustom: false
            },
            showAddDialog: false,
            availableSongs: [],
            selectedSongs: []
        }
    },
    onLoad(options) {
        const playlistId = parseInt(options.id);
        this.loadPlaylistDetails(playlistId);
        this.loadAvailableSongs();
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        playSong(song) {
            // 这里可以添加播放逻辑
            console.log('播放歌曲:', song)
        },

        loadPlaylistDetails(playlistId) {
            // 模拟根据ID获取歌单详情
            const allPlaylists = {
                1: {
                    id: 1,
                    title: '流行热歌',
                    info: '25首 | 播放1.2万次',
                    image: 'https://ai-public.mastergo.com/ai/img_res/647cde825adf712e96b3bc66cb67656c.jpg',
                    songs: [
                        { title: '热门歌曲1', artist: '歌手A' },
                        { title: '热门歌曲2', artist: '歌手B' },
                        { title: '热门歌曲3', artist: '歌手C' }
                    ]
                },
                2: {
                    id: 2,
                    title: '轻音乐',
                    info: '18首 | 播放8.5千次',
                    image: 'https://ai-public.mastergo.com/ai/img_res/0d326ebc29d14771873128d2e0f564fd.jpg',
                    songs: [
                        { title: '安静的午后', artist: '音乐家X' },
                        { title: '林间小溪', artist: '音乐家Y' },
                        { title: '星空', artist: '音乐家Z' }
                    ]
                }
            };

            if (allPlaylists[playlistId]) {
                this.playlist = allPlaylists[playlistId];
            } else {
                // 从本地存储加载自定义歌单
                const customPlaylists = uni.getStorageSync('customPlaylists') || [];
                const customPlaylist = customPlaylists.find(p => p.id === playlistId);
                if (customPlaylist) {
                    this.playlist = customPlaylist;
                }
            }
        },
        
        // 加载可用歌曲列表
        loadAvailableSongs() {
            // 从本地存储加载用户添加的歌曲
            const customSongs = uni.getStorageSync('customSongs') || [];
            
            // 加载系统预设歌曲（从首页获取）
            const systemSongs = [
                {
                    id: 1,
                    title: '夜空中最亮的星',
                    artist: '逃跑计划',
                    cover_url: 'https://ai-public.mastergo.com/ai/img_res/647cde825adf712e96b3bc66cb67656c.jpg',
                    audio_url: 'https://music.163.com/song/media/outer/url?id=25906124.mp3',
                    duration: '04:00'
                },
                {
                    id: 2,
                    title: '海阔天空',
                    artist: 'Beyond',
                    cover_url: 'https://ai-public.mastergo.com/ai/img_res/c259606553810742eff43369376a2a87.jpg',
                    audio_url: 'https://music.163.com/song/media/outer/url?id=346576.mp3',
                    duration: '05:20'
                },
                {
                    id: 3,
                    title: '起风了',
                    artist: '买辣椒也用券',
                    cover_url: 'https://ai-public.mastergo.com/ai/img_res/5664d87772b76472ab0cd4f1d1a44d1d.jpg',
                    audio_url: 'https://music.163.com/song/media/outer/url?id=1330348068.mp3',
                    duration: '04:40'
                },
                {
                    id: 4,
                    title: '稻香',
                    artist: '周杰伦',
                    cover_url: 'https://ai-public.mastergo.com/ai/img_res/dceca67b9c576b6031ddcfce7b27afb8.jpg',
                    audio_url: 'https://music.163.com/song/media/outer/url?id=185811.mp3',
                    duration: '03:40'
                },
                {
                    id: 5,
                    title: '晴天',
                    artist: '周杰伦',
                    cover_url: 'https://ai-public.mastergo.com/ai/img_res/0d326ebc29d14771873128d2e0f564fd.jpg',
                    audio_url: 'https://music.163.com/song/media/outer/url?id=185668.mp3',
                    duration: '04:20'
                },
                {
                    id: 6,
                    title: '夜曲',
                    artist: '周杰伦',
                    cover_url: 'https://ai-public.mastergo.com/ai/img_res/647cde825adf712e96b3bc66cb67656c.jpg',
                    audio_url: 'https://music.163.com/song/media/outer/url?id=185809.mp3',
                    duration: '03:45'
                },
                {
                    id: 7,
                    title: '青花瓷',
                    artist: '周杰伦',
                    cover_url: 'https://ai-public.mastergo.com/ai/img_res/c259606553810742eff43369376a2a87.jpg',
                    audio_url: 'https://music.163.com/song/media/outer/url?id=185895.mp3',
                    duration: '03:12'
                },
                {
                    id: 8,
                    title: '告白气球',
                    artist: '周杰伦',
                    cover_url: 'https://ai-public.mastergo.com/ai/img_res/5664d87772b76472ab0cd4f1d1a44d1d.jpg',
                    audio_url: 'https://music.163.com/song/media/outer/url?id=436514312.mp3',
                    duration: '03:34'
                },
                {
                    id: 9,
                    title: '七里香',
                    artist: '周杰伦',
                    cover_url: 'https://ai-public.mastergo.com/ai/img_res/dceca67b9c576b6031ddcfce7b27afb8.jpg',
                    audio_url: 'https://music.163.com/song/media/outer/url?id=185819.mp3',
                    duration: '04:05'
                },
                {
                    id: 10,
                    title: '简单爱',
                    artist: '周杰伦',
                    cover_url: 'https://ai-public.mastergo.com/ai/img_res/0d326ebc29d14771873128d2e0f564fd.jpg',
                    audio_url: 'https://music.163.com/song/media/outer/url?id=185868.mp3',
                    duration: '04:28'
                }
            ];
            
            // 合并所有歌曲
            this.availableSongs = [...systemSongs, ...customSongs];
        },
        
        // 显示添加歌曲对话框
        showAddSongDialog() {
            this.showAddDialog = true;
            this.selectedSongs = [];
        },
        
        // 关闭添加歌曲对话框
        closeAddDialog() {
            this.showAddDialog = false;
            this.selectedSongs = [];
        },
        
        // 切换歌曲选择
        toggleSongSelection(song) {
            const index = this.selectedSongs.findIndex(s => s.id === song.id);
            if (index > -1) {
                this.selectedSongs.splice(index, 1);
            } else {
                this.selectedSongs.push(song);
            }
        },
        
        // 判断歌曲是否已选择
        isSongSelected(song) {
            return this.selectedSongs.some(s => s.id === song.id);
        },
        
        // 确认添加歌曲
        confirmAddSongs() {
            if (this.selectedSongs.length === 0) {
                uni.showToast({
                    title: '请选择歌曲',
                    icon: 'none'
                });
                return;
            }
            
            // 添加歌曲到歌单
            this.selectedSongs.forEach(song => {
                if (!this.playlist.songs.some(s => s.id === song.id)) {
                    this.playlist.songs.push(song);
                }
            });
            
            // 更新本地存储
            let customPlaylists = uni.getStorageSync('customPlaylists') || [];
            const index = customPlaylists.findIndex(p => p.id === this.playlist.id);
            if (index > -1) {
                customPlaylists[index] = this.playlist;
                uni.setStorageSync('customPlaylists', customPlaylists);
            }
            
            uni.showToast({
                title: `已添加${this.selectedSongs.length}首歌曲`,
                icon: 'success'
            });
            
            this.closeAddDialog();
        },
        
        // 显示歌曲菜单
        showSongMenu(song, index) {
            if (!this.playlist.isCustom) return;
            
            uni.showActionSheet({
                itemList: ['从歌单中移除'],
                success: (res) => {
                    if (res.tapIndex === 0) {
                        this.removeSongFromPlaylist(index);
                    }
                }
            });
        },
        
        // 从歌单中移除歌曲
        removeSongFromPlaylist(index) {
            this.playlist.songs.splice(index, 1);
            
            // 更新本地存储
            let customPlaylists = uni.getStorageSync('customPlaylists') || [];
            const playlistIndex = customPlaylists.findIndex(p => p.id === this.playlist.id);
            if (playlistIndex > -1) {
                customPlaylists[playlistIndex] = this.playlist;
                uni.setStorageSync('customPlaylists', customPlaylists);
            }
            
            uni.showToast({
                title: '已移除',
                icon: 'success'
            });
        }
    }
}
</script>

<style>
.container {
    background-color: #ffffff;
    min-height: 100vh;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 90rpx;
    background-color: #ffffff;
    z-index: 50;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #eeeeee;
}

.back {
    font-size: 40rpx;
    margin-right: 20rpx;
}

.title {
    font-size: 32rpx;
    font-weight: bold;
}

.playlist-info {
    margin-top: 100rpx;
    padding: 30rpx;
    display: flex;
    align-items: center;
}

.playlist-cover {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx;
    margin-right: 30rpx;
}

.playlist-title {
    font-size: 32rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 10rpx;
}

.playlist-desc {
    font-size: 26rpx;
    color: #888888;
    display: block;
}

.song-list {
    margin-top: 30rpx;
    padding: 0 30rpx;
}

.song-item {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
}

.song-index {
    width: 60rpx;
    text-align: center;
    color: #888888;
}

.song-info {
    flex: 1;
}

.song-title {
    font-size: 28rpx;
    display: block;
}

.song-artist {
    font-size: 24rpx;
    color: #888888;
    display: block;
}

.song-more {
    width: 60rpx;
    text-align: center;
    color: #888888;
}

/* 添加歌曲区域 */
.add-song-section {
    padding: 30rpx;
    display: flex;
    justify-content: center;
}

.add-song-btn {
    display: flex;
    align-items: center;
    padding: 20rpx 40rpx;
    background: linear-gradient(45deg, rgba(124, 77, 255, 0.1), rgba(179, 136, 255, 0.1));
    border: 2rpx solid #7C4DFF;
    border-radius: 50rpx;
}

.add-song-icon {
    font-size: 40rpx;
    color: #7C4DFF;
    margin-right: 10rpx;
}

.add-song-text {
    font-size: 28rpx;
    color: #7C4DFF;
}

/* 弹窗样式 */
.dialog-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dialog-content {
    width: 600rpx;
    max-height: 80vh;
    background-color: #ffffff;
    border-radius: 20rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #eeeeee;
}

.dialog-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
}

.dialog-close {
    font-size: 50rpx;
    color: #888888;
    line-height: 1;
}

.dialog-body {
    flex: 1;
    overflow-y: auto;
    padding: 20rpx 0;
}

.song-select-list {
    padding: 0 30rpx;
}

.song-select-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
}

.song-select-info {
    flex: 1;
}

.song-select-title {
    font-size: 28rpx;
    display: block;
    margin-bottom: 5rpx;
}

.song-select-artist {
    font-size: 24rpx;
    color: #888888;
    display: block;
}

.song-select-check {
    width: 40rpx;
    height: 40rpx;
    border: 2rpx solid #dddddd;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    color: #ffffff;
}

.song-select-check.checked {
    background-color: #7C4DFF;
    border-color: #7C4DFF;
}

.dialog-footer {
    display: flex;
    border-top: 1rpx solid #eeeeee;
}

.dialog-btn {
    flex: 1;
    height: 90rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
}

.dialog-btn-cancel {
    color: #888888;
    border-right: 1rpx solid #eeeeee;
}

.dialog-btn-confirm {
    color: #7C4DFF;
    font-weight: 500;
}

.dialog-btn:active {
    background-color: #f5f5f5;
}
</style>